<style scoped>

</style>
<template>
  <ListSlot :list="list" :title="title" :link_href="link_href" :link_text="link_text" :cols="cols" :mode="mode">
    <template #default="{row}">
      <Link :column="cols!==1" :title="row.title" :head_img="row.head_img||row.icon" :href="row.href" :badge="row.badge" :round="mode=='round_img'"></Link>
    </template>
  </ListSlot>
</template>

<script lang="ts">
// @ts-ignore
import {href_handle} from "@/vue_plugin/router_auto.js";
// @ts-ignore
import ListSlot from "@/components/slot/ListSlot.vue";
// @ts-ignore
import Link from "@/components/widget/Link.vue";

import type {PropType} from "vue";

interface TypeLink{
  title?: string;
  icon?: string;
  head_img?: string;
  badge?: string|number;
  href?: string;
}

/**菜单列表
 * @prop {*}
 */
export default {
  _title_: '链接列表',
  _tip_: '自定义数据列表的链接列表，无需请求网络数据',
  _css_var_: {
    ...Link._css_var_,
    ...ListSlot._css_var_,
  },
  _head_img_: '',
  _group_: '详情组件',
  components: {Link, ListSlot},
  props:{
    list: {
      type: Array as PropType<TypeLink[]>,
      _label_: '链接项目列表',
      _tip_: '',
      _required_: true,
      _input_type_: [
        {_type_:'json_param_arr', config:[
            {name:'title', label:'标题', type:'text_one'},
            {name:'icon', label:'图标', type:'iconfont', width:'45px'},
            {name:'head_img', label:'头图', type:'file_img', width:'45px', tips:'图标的替代，优先级更高'},
            {name:'badge', label:'徽标', type:'text_one', width:'60px', tips:'右上角的标会，未空表示不显示'},
            {name:'href', label:'跳转链接', type:'text_one', tips:''},
          ]}
      ],
    },
    title: {
      type: String,
      _label_: '列表标题',
      _tip_: '显示在列表左上角的标题，如果为空，表示不显示',
    },
    link_href: {
      type: String,
      _label_: '跳转链接',
      _tip_: '标题点击后的跳转地址，为空不会显示右侧箭头和链接文本',
    },
    link_text: {
      type: String,
      _label_: '链接文本',
      _tip_: '标题右侧的链接文本',
    },
    cols: {
      type: [String, Number],
      _label_: '分栏数量',
      _tip_: '项目列表的分栏数量，1-5，默认为：1',
    },
    mode: {
      type: String,
      _label_: '列表模式',
      _tip_: 'round、round_list、round_row、round_img、其他。分别表示整体圆角、列表圆角、每一项圆角、图片圆角、无圆角',
    },
  },
  data(){
    return {
    }
  },
  methods:{
    click(row:any){
      let href = row.href;
      if (href) href_handle(href);
    },
  },
  watch: {
  },
  computed:{
  },
  mounted(){
  }
}
</script>